<template>
  <div
    class="main-color"
    :style="{
      backgroundImage: 'url(' + colorMask + ')',
      backgroundColor: backColor.hex,
    }"
  >
    <color-box @change="changeBack" />
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';

  import ColorBox from './components/ColorBox.vue';
  import colorMask from '@/assets/images/color-mask.png';
  import getColors, { colorItem } from '@mock/getColors';

  const colorData = getColors();
  const backColor = reactive(colorData[1]);

  const changeBack = (d: colorItem) => {
    backColor.CMYK = d.CMYK;
    backColor.RGB = d.RGB;
    backColor.hex = d.hex;
    backColor.name = d.name;
    backColor.pinyin = d.pinyin;
  };
</script>

<style lang="scss" scoped>
  .main-color {
    width: 100%;
    transition: background-color 1s linear;
  }
</style>
